<template>

    <div id="app">
      <div class="header">
           <router-link to="/zhu"> <p class="polue"></p></router-link>
           <a href="#" class="folie">购物车</a>
          <p class="doule-a"></p>
      </div>
      <div class="doulow-s">
      <ul class="doule">
          <li class="roulw-a-a"  v-for="(item,index) in shopp">
           <a href="#" class="lou-www-a">
             <p class="tou-www"    @click="clickmoney(index)"></p>
              </a>
             <a href="#"  class="loww-q-q">
                  <img :src="item.src">
                   
                 </a>
                 <div class="container-a">
                 <h5 class="lowww-ww-a">{{item.name}}</h5>
                 <span class="lowww-ww-bb">售价{{item.money}}元</span>
                 <span class="lowww-ww-bb">共需{{item.moness*item.min}}元</span>

                 <div class="douloww-a-a-w">
                     <a href="#"  class="toule-ww">
                         <i data-v-5c6b2c62="" class="image-icons icon-cross"   @click="add(index)"></i>

                     </a>
                         <div data-v-5c6b2c62="" class="input-num"><span data-v-5c6b2c62="" class="loww-wwq">{{item.min}}</span></div>
                         <a href="#"  class="toule-ww">

                         <i data-v-5c6b2c62="" class="image-icons icon-crosa"   @click="cdd(index)"></i>

                         </a>
                         <a href="#" class="youtil-ww">
                           <i data-v-5c6b2c62="" class="closslow-a"></i>
                         </a>
                         </div>
     
        </div>
          </li>
      </ul>
      </div>
       <div class="lloww-a-w"  style="color:black;background-color:#ffffff">
         <a href="#" class="doule">共需要<span>{{toto}}</span>元</a>
         <div class="sakldj-a">
            <router-link to="/zhu"><div style="color:black;background-color:#ccc">继续购买</div></router-link>
         <div style="color:#ffffff;background-color:#ff6700"   @click="asssk()">去结算</div>
         </div>
           
       </div>
    </div>

</template>

<script>  
import Vue from 'vue';
import axios from 'axios'
export default {
  name: 'Index',
   data(){
     return{
          shopp:[],
              allChecked:false,
              moneyss:[],
              toto:0,
              fouloowSS:false,
     }
   },
     components:{
         
       },
                 created(){
     this.getList();
    //  this.abc(a);
  },
         methods:{
 
             getList(){
                    axios.get("/api/yingshi").then((res)=>{
              console.log(res.data.losswol)
              this.arrs=res.data.links,
              this.value=res.data.boble
              this.shopp=res.data.losswol
              this.moneyss=res.data.lowwwws
            }).catch((err)=>console.log(err))
              },
    

   add(a) {
                console.log(this.shopp[a].min)
                this.shopp[a].min<= 0 ?this.shopp[a].min = 0 : this.shopp[a].min--;
                    var allNum = 0;
       for(var i=0; i < this.shopp.length; i++){
               allNum+=this.shopp[i].money*this.shopp[i].min
       }
       this.toto=allNum;
                console.log
            },
            cdd(a) {
                this.shopp[a].min++;
                //  this.shopp[a].moness= this.shopp[a].min* this.shopp[a].money;
                // pro.proCount++;
                // this.abc(a)
                  //  this.abc(a);
                    var allNum = 0;
       for(var i=0; i < this.shopp.length; i++){
               allNum+=this.shopp[i].money*this.shopp[i].min
       }
       this.toto=allNum;
                console.log
                //  abc(a)
            },
asssk(){
      alert("你好，你一共需要支付"+this.toto+"元,确认支付吗")
},




        },
}
</script>
<style   scoped  lang="scss">
.header{
      width:100%;
      height:50px;
      background:#f2f2f2;
      display:flex;
      text-align:center;
}
    .polue{
        width:40px;
        height:40px;
        /* background:red; */
        background:url();
          background-size: 100% 100%;
    }
    .doule-a{
         width:45px;
        height:40px;
        /* background:red; */
        background:url();
          background-size: 100% 100%;
    }
    .folie{
          width:383px;
          font-size:19px;
          line-height:46px;
    }
    .doule{
        width:100%;
        height:150px;
        background:#ffffff;

    }
    .lou-www-a{
        height:150px;
        width:50px;
        // border:1px solid #ccc;
        // background:red;
        position:relative;
        display:block;
    }
    .roulw-a-a{
        display:flex;
    }
   .roulw-a-a   .loww-q-q{
         width:130px;
         height:130px;
        margin:8px 0px 0px 0px;

   }
    .roulw-a-a  .lowww-ww-a{
         font-size:19px;
    }
       .roulw-a-a  .container-a{
                 width:242px;
         height:20px;
              margin:8px 0px 0px 9px;
       }
        .roulw-a-a .lowww-ww-bb{
              font-size:15px;
              color:black;
        }
      .roulw-a-a   .loww-q-q img{
               /* width:50px;
         height:50px; */
      }
    .tou-www{
          width:35px;
        height:35px;
        position:absolute;
        left:5px;
        top:50px;
        /* background:red; */
        background:url(https://s1.mi.com/m/images/m/check_press.png);
              background-size: 100% 100%;
    }
    .douloww-a-a-w{
    display:flex;
    .toule-ww{
                width:35px;
        height:35px;
        border: 1px solid #ccc;
       
     .icon-cross{
               width:20px;
        height:20px;
        display:block;
            margin: 5px 1px 0px 6px;


        /* background:red; */
                // border: 1px solid #ccc;
        background:url();
              background-size: 100% 100%;
         }

    }
         .input-num{
                width:35px;
        height:35px;
        font-size:15px;
        text-align: center;
        line-height:34px;
        // bac:#ccc;
        border: 1px solid #ccc;
        color:#ccc;
         }
         .toule-ww{
          width:35px;
        height:35px;
        border: 1px solid #ccc;
         .icon-crosa{
               width:20px;
        height:20px;
        display:block;
               margin: 5px 1px 0px 5px;
                // border: 1px solid #ccc;
        /* background:red; */
        background:url();
              background-size: 100% 100%;
         }
         }
         .youtil-ww{
          //  width:10px;
          //  height:10px;
           display:block;
          //  background:red;
           line-height:10px;
            //  position:absolute;
            //  right:11px;
            margin: 3px 0px 4px 79px;
             .closslow-a{
                              width:40px;
        height:40px;
        display:block;
                // border: 1px solid #ccc;
        /* background:red; */
        background:url();
              background-size: 100% 100%;
             }
         }
    }
    .lloww-a-w{
      width:100%;
      height:50px;
      background:red;
      position:fixed;
      bottom:0px;
      font-size:21px;
      display:flex;
      .doule{
             line-height:44px;
             span{
                color:#ff6700;
             }
      }
      .sakldj-a{

    display:flex;
    position:absolute;
   right:0px;
        div{
           width:120px;
      height:50px;
      background:green;
      font-size:17px;
      text-align:center;
      line-height:43px;
        }

      }
    }
</style>
